<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>产品详情</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/jquery-viewer.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="">
    <script src="./js/jquery.js"></script>
    <script src="./js/swiper.min.js"></script>
    <script src="./js/jquery-viewer.js"></script>
    <style>
        #text{
            margin-bottom: 100px
        }
    .container {
        width: 1200px;
        margin: 0 auto;
    }

    .swiper-slide {
        background-size: cover;
        background-position: center;
    }

    .gallery-top-box {
        width: 100%;
        margin: 0 auto;
        cursor: pointer;
    }

    .gallery-thumbs-box {
        width: 100%;
        margin: 0 auto;
    }

    .swiper-container {
        width: 100%;
        height: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .gallery-thumbs {
        height: 100px;
        box-sizing: border-box;
        padding: 10px 0;
    }

    .gallery-thumbs .swiper-slide {
        height: 100%;
        width:25%;
        opacity: 0.4;
    }

    .gallery-thumbs .swiper-slide-active {
        opacity: 1;
    }

    
    </style>
    <!--[if lt IE 9]>
        <script type="text/javascript"  src="http://www.ijquery.cn/js/html5shiv.js"></script>
    <![endif]-->
</head>
<body>
        <!-- header -->
    <div id="header" class="f-cb">
            <div class="logo fl">
                <a href="#">
                    <img src="./image/logo.png" alt="" width="180">
                </a>
            </div>
            <ul class="main-menu fr">
                <li class="dropdown">
                    <a href="./index.html">首页</a>
                </li>
                <li class="dropdown active">
                    <a href="#">
                        成功案例
                        <i class="iconfont">&#xe638;</i>
                    </a>
                    <ul class="subnav sub-directory">
                        <li>
                            <a href="./case.html?type=0">汉白玉石狮</a>
                        </li>
                        <li>
                            <a href="./case.html?type=1">汉白玉栏杆</a>
                        </li>
                        <li>
                            <a href="./case.html?type=2">汉白玉浮雕</a>
                        </li>
                        <li>
                            <a href="./case.html?type=3">人物雕塑</a>
                        </li>
                        <li>
                            <a href="./case.html?type=4">其他雕塑</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" >
                        定制流程
                        <i class="iconfont">&#xe638;</i>
                    </a>
                    <ul class="subnav sub-directory">
                        <li>
                            <a href="./design.html">免费设计</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#">
                        关于我们
                        <i class="iconfont">&#xe638;</i>
                    </a>
                    <ul class="subnav sub-directory">
                        <li>
                            <a href="./aboutUs_culture.html">企业文化</a>
                        </li>
                        <li>
                            <a href="./aboutUs_factory.html">厂区展示</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#footer">联系我们</a>
                </li>
                <li class="dropdown">
                    <a href="./news.html">
                        近期跟踪
                        <i class="iconfont">&#xe638;</i>
                    </a>
                </li>
            </ul>
    </div>
    <div class="placeholder"></div>
    <div id="pageTarget">
        <div class="container_target" style="visibility: visible;">
            您的位置：
            <a href="./case.html">成功案例</a> &gt;
            <a href="javascript:void(0)">案例详情</a> &gt;
        </div>
    </div>
    <div class="caseDetail-container">
        <div class="container-wrapper w1300">
            <div class="container">
                    <div class="gallery-top-box">
                        <div class="swiper-container gallery-top">
                            <div class="swiper-wrapper"></div>
                            <!-- Add Arrows -->
                            <div class="btn_l swiper-button-prev">
                                <i class="iconfont">&#xe606;</i>
                            </div>
                            <div class="btn_r swiper-button-next">
                                <i class="iconfont">&#xe639;</i>
                            </div>
                        </div>
                    </div>
                    <div class="gallery-thumbs-box">
                        <div class="swiper-container gallery-thumbs">
                            <div class="swiper-wrapper">
                            </div>
                        </div>
                    </div>
            </div>
            
            <div class="title" id="title"></div>
            <div class="text" id="text"></div>

            <!-- <div class="listContent">
                <ul class="f-cb">
                    <li>
                        <a href="#">
                            <div class="item-img">
                                <img src="./image/caseDetail-img4.jpg" alt="">
                            </div>
                            <div class="item-info">
                                <p class="title ellipsis">1.6米特别大尺寸汉白玉</p>
                                <p class="subtitle">汉白玉石狮子 安装于学校门口 尺寸（m</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="item-img">
                                <img src="./image/caseDetail-img4.jpg" alt="">
                            </div>
                            <div class="item-info">
                                <p class="title ellipsis">1.6米特别大尺寸汉白玉</p>
                                <p class="subtitle">汉白玉石狮子 安装于学校门口 尺寸（m</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="item-img">
                                <img src="./image/caseDetail-img4.jpg" alt="">
                            </div>
                            <div class="item-info">
                                <p class="title ellipsis">1.6米特别大尺寸汉白玉</p>
                                <p class="subtitle">汉白玉石狮子 安装于学校门口 尺寸（m</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="item-img">
                                <img src="./image/caseDetail-img4.jpg" alt="">
                            </div>
                            <div class="item-info">
                                <p class="title ellipsis">1.6米特别大尺寸汉白玉</p>
                                <p class="subtitle">汉白玉石狮子 安装于学校门口 尺寸（m</p>
                            </div>
                        </a>
                    </li>
                </ul>
            </div> -->
        </div>
    </div>
     <!-- footer -->
    <!-- footer -->
    <div id="footer">
        <!-- codemodel-->
       <div class="codeModel">
           <div class="code">
               <img src="./image/code.png" alt="">
           </div>
       </div>
       <div class="footer-con w1300 f-cb">
           <ul class="fl">
               <h3>联系我们</h3>
               <li class="address">
                   地址：<span></span>
               </li>
               <li class="phone">
                   电话：<span></span>
               </li>
               <li>
                   E-mail: <span class="email"></span> QQ：<span class="qq"></span>
               </li>
               <li>
                   网址：http://www.bxxlsd.com
               </li>
           </ul>
           <ul class="contact fl">
               <h3>关注我们</h3>
               <ul class="icons f-cb">
                   <li>
                       <a href="//weibo.com/u/3541697272" target="_blank">
                           <i class="iconfont">&#xe67a;</i>
                       </a>
                   </li>
                   <li>
                       <a  class="openQQ">
                           <i class="iconfont">&#xe600;</i>
                       </a>
                   </li>
                   <li class="wexin">
                       <i class="iconfont">&#xe63f;</i>
                   </li>
               </ul>
           </ul>
           <ul class="fl">
               <h3>联系鑫利石雕</h3>
               <div id="map">

                </div>
           </ul>
       </div>
       <div class="copyRight">
           版权所有Copyright©四川宝兴鑫利石雕厂 蜀ICP备16008598号-1 友情链接: <a href="#">汉白玉雕刻（石林轩）</a>
       </div>
   </div>
    <!-- side -->
    <!-- side -->
    <div class="side">
        <ul>
            <li>
                <a href="#" class="openQQ">
                    <div class="sidebox">
                        <img src="./image/side_icon01.png" alt="">
                        在线咨询
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="openQQ">
                    <div class="sidebox">
                        <img src="./image/side_icon02.png" alt="">
                        在线咨询
                    </div>
                </a>
            </li>
            <li class="phone">
                <a href="#">
                    <div class="sidebox">
                        <img src="./image/side_icon03.png" alt="">
                        <span></span>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <div id="view" style="display:none;">
        <ul>
           
        </ul>
    </div>
    <script src="./js/common.js"></script>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR&callback=map_init"></script>
    <script src="http://api.map.baidu.com/getscript?v=1.4&ak=&services=&t=20181212032854"></script>
    <script>
        var galleryTop = new Swiper('.gallery-top', {
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            spaceBetween: 10,
            autoplayDisableOnInteraction : true,
            observer:true,
            observeParents:true,
            onClick:function(index,event){
                if(event.path[0].className=="iconfont"){
                    return;
                }
               galleryTop.stopAutoplay();
               var _index=index.activeIndex;
               $("#view ul li:eq("+_index+") img").trigger("click");
            }
        });
        var galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 10,
            centeredSlides: true,
            slidesPerView: 'auto',
            touchRatio: 0.2,
            slideToClickedSlide: true,
            autoplayDisableOnInteraction : false,
            observer:true,
            observeParents:true,
            onClick:function(){
                galleryTop.stopAutoplay();
            }
        }); 
        galleryTop.params.control = galleryThumbs;
        galleryThumbs.params.control = galleryTop;
        
    </script>
    <script>
        var obj={
            url:'http://39.108.226.146',
            init(){
                this.getData();
            },
            getUrlVar(name) {
                var vars = [], hash;
                var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
                for (var i = 0; i < hashes.length; i++) {
                    hash = hashes[i].split('=');
                    vars.push(hash[0]);
                    vars[hash[0]] = hash[1];
                }
                return vars[name];
            },
            getData(){
                var _id=this.getUrlVar('id');
                var _this=this;
                $.ajax({
                    url:this.url+'/user/CaseOne',
                    type:'get',
                    data:{_id:_id},
                    success:function(res){
                        res=JSON.parse(res);
                        if(res.status==0){
                           var banner=res.data.imgs;
                           var _html="";
                           var htmlLi="";
                            for(var i=0;i<banner.length;i++){
                                _html+="<div class='swiper-slide' style='background-image:url("+banner[i].replace('../client/','http://39.108.226.146/').replace('./','http://39.108.226.146/')+")'></div>"
                                htmlLi+="<li><img src="+banner[i].replace(/\.\.\/client/g,'http://39.108.226.146').replace(/\.\//g,'http://39.108.226.146/')+"></li>"
                            }
                            $(".gallery-top .swiper-wrapper").html(_html);
                            $(".gallery-thumbs .swiper-wrapper").html(_html);
                            $("#view ul").html(htmlLi);
                            console.log(res.data.content);
                            $("#text").html(res.data.content.replace(/\.\.\/client/g,'http://39.108.226.146').replace(/\.\.\//g,'http://39.108.226.146/'));
                            $("#view").viewer();
                            
                        }
                    }
                })
            },
            
        }
        obj.init();
    </script>
</body>
</html>